<template>
    <div>
        <div class="loading" v-show="!movie">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="movie_box" v-for="item in movie">
            <img v-bind:src="item.images.large" alt="">
            <p>{{item.title}}</p>
        </div>
    </div>
</template>

<script>
    export default{
        data:function(){
          return {
              movie:""
          }
        },
        mounted:function(){
            var path=this.$route.path
            if(path=="/"||path=="/cont1"){
                this.$http.jsonp('http://api.douban.com/v2/movie/top250').then(function(res){
                    var movies=res.body.subjects
                    this.movie=movies
                },function(){
                    console.log('请求失败处理');   //失败处理
                });
            }else if(path=="/cont2"){
                this.$http.jsonp('http://api.douban.com/v2/movie/in_theaters').then(function(res){
                    var movies=res.body.subjects
                    this.movie=movies
                    console.log(movies);
                },function(){
                    console.log('请求失败处理');   //失败处理
                });
            }else if(path=="/cont3"){
                this.$http.jsonp('http://api.douban.com/v2/movie/coming_soon').then(function(res){
                    var movies=res.body.subjects
                    this.movie=movies
                },function(){
                    console.log('请求失败处理');   //失败处理
                });
            }

        }
    }
</script>
<style>
    .movie_box{
        padding: 5px;
       width: calc(50% - 12px);
       height: 265px;
        background-color:black;
        float: left;
        border: 1px solid white;
    }
    .movie_box img{
        width: 100%;
        height: 240px;
        display: inline-block;
    }
    .movie_box p{
        text-align: center;
        color: white;
    }
    .loading{
        width: 80px;
        height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% ,-50%);
        margin: 0 auto;
        margin-top:100px;
    }
    .loading span{
        display: inline-block;
        width: 8px;
        height: 100%;
        border-radius: 4px;
        background: lightgreen;
        -webkit-animation: load 1s ease infinite;
    }
    @-webkit-keyframes load{
        0%,100%{
            height: 40px;
            background: lightgreen;
        }
        50%{
            height: 70px;
            margin: -15px 0;
            background: lightblue;
        }
    }
    .loading span:nth-child(2){
        -webkit-animation-delay:0.2s;
    }
    .loading span:nth-child(3){
        -webkit-animation-delay:0.4s;
    }
    .loading span:nth-child(4){
        -webkit-animation-delay:0.6s;
    }
    .loading span:nth-child(5){
        -webkit-animation-delay:0.8s;
    }
</style>